<template>

  <v-app id="inspire">
    <v-navigation-drawer
      v-model="drawer"
      fixed
      clipped
      class="grey lighten-4"
      app
    >
      <v-list
        dense
        class="grey lighten-4"
      >

        <template v-for="(item, i) in items">

          <v-layout
            v-if="item.heading"
            :key="i"
            row
            align-center
          >
            <v-flex xs6 @click="goto(item.url)">
              <v-subheader v-if="item.heading">
                {{ item.heading }}
              </v-subheader>
            </v-flex>
            <v-flex xs6 class="text-xs-right">
              <v-btn small flat>edit</v-btn>
            </v-flex>
          </v-layout>
          <v-divider
            v-else-if="item.divider"
            :key="i"
            dark
            class="my-3"
          ></v-divider>

          <v-list-tile
            v-else
            :key="i"
            @click="goto(item.url)"

          >

              <v-list-tile-action>
                <v-icon>{{ item.icon }}</v-icon>
              </v-list-tile-action>
              <v-list-tile-content>
                <v-list-tile-title class="grey--text">
                  {{ item.text }}
                </v-list-tile-title>
              </v-list-tile-content>

          </v-list-tile>

        </template>

      </v-list>
    </v-navigation-drawer>
    <my-header @drawer="drawer = !drawer"></my-header>
    <v-content color="red">
      <v-container fluid  class="grey lighten-4">
        <router-view></router-view>
      </v-container>
    </v-content>
    <my-footer></my-footer>
  </v-app>
</template>

<script>
  import MyHeader from './components/MyHeader'
  import MyFooter from './components/MyFooter'

  export default {
    name: "Index",
    components: {
      MyHeader, MyFooter
    },
    methods:{
      goto(url){
        this.$router.push(url)
      }
    },
    data: () => ({
      drawer: true,

      items: [
        {icon: 'keyboard', text: '供应商查询', 'url': '/company/show'},
        {icon: 'lightbulb_outline', text: '添加供应商', 'url': '/company/add'},

        {divider: true},
        {icon: 'touch_app', text: '食品出入库管理', 'url': '/meal/add'},
        {icon: 'chat_bubble', text: '食品出入库查询', 'url': '/meal/show'},

      ]
    }),
    props: {
      source: String
    }
  }
</script>

<style scoped>

</style>
